---
id: reanimated-drawer-layout
title: Reanimated Drawer Layout
sidebar_label: Reanimated Drawer Layout
---

import useBaseUrl from '@docusaurus/useBaseUrl';

Cross-platform replacement for the React Native's [DrawerLayoutAndroid](http://reactnative.dev/docs/drawerlayoutandroid.html) component.  
For detailed usage of standard parameters, please refer to the [React Native docs](http://reactnative.dev/docs/drawerlayoutandroid.html).

### Usage:

To use it, import it in the following way:

```js
import ReanimatedDrawerLayout from 'react-native-gesture-handler/ReanimatedDrawerLayout';
```

## Properties:

### `drawerType`

specifies the way the drawer will be displayed.
Accepts values of the `DrawerPosition` enum. Defaults to `FRONT`.

- `FRONT` the drawer will be displayed above the content view.
- `BACK` the drawer will be displayed below the content view, revealed by sliding away the content view.
- `SLIDE` the drawer will appear attached to the content view, opening it slides both the drawer and the content view.

| `FRONT`                                               | `BACK`                                               | `SLIDE`                                               |
| ----------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------- |
| <img src={useBaseUrl('gifs/new-drawer-front.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-back.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-slide.gif')} /> |

### `edgeWidth`

width of the invisible, draggable area on the edge of the content view, which can be dragged to open the drawer.

### `hideStatusBar`

a boolean value. When set to `true`, drawer component will use [StatusBar API](http://reactnative.dev/docs/statusbar.html) to hide the OS status bar when the drawer is dragged or idle in the `open` position.

### `statusBarAnimation`

a string with possible values: `slide`, `none` or `fade`. Defaults to `slide`.
May be used in combination with `hideStatusBar` to select the animation used for hiding the status bar.
See [StatusBar API](http://reactnative.dev/docs/statusbar.html#statusbaranimation) docs.

### `overlayColor`

color of the background overlay on top of the content window when the drawer is `open`.  
This color's opacity animates from 0% to 100% as the drawer transitions from closed to open. Defaults to `rgba(0, 0, 0, 0.7)`.

### `renderNavigationView`

a renderer function for the drawer component, provided with a `progress` parameter.

-  `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
    - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
    - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing

### `onDrawerClose`

a function which is called when the drawer has been closed.

### `onDrawerOpen`

a function which is called when the drawer has been opened.

### `onDrawerSlide`

a function which is called when drawer is moving or animating, provided with a `progress` parameter.

-  `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
    - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
    - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing

### `onDrawerStateChanged`

a function which is called when the status of the drawer changes. It takes two arguments:

- `newState` - interaction state of the drawer. It can be one of the following:
  - `DrawerState.IDLE`
  - `DrawerState.DRAGGING`
  - `DrawerState.SETTLING`
- `drawerWillShow` - `true` when `drawer` started animating to `open` position, `false` otherwise.

### `enableTrackpadTwoFingerGesture` (iOS only)

enables two-finger gestures on supported devices, for example iPads with trackpads.
If not enabled, the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture.

### `children`

either a component that's rendered in the content view or a function.
If `children` is a function, it is provided with a `progress` parameter.

-  `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
    - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
    - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing

### `mouseButton(value: MouseButton)` (Web & Android only)

allows users to choose which mouse button should handler respond to.
The enum `MouseButton` consists of the following predefined fields:

- `LEFT`
- `RIGHT`
- `MIDDLE`
- `BUTTON_4`
- `BUTTON_5`
- `ALL`

Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Defaults to `MouseButton.LEFT`.

### `enableContextMenu(value: boolean)` (Web only)

specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Defaults to `false`.

## Methods

### `openDrawer(options)`

`openDrawer` accepts an optional `options` parameter, which is an object with the following optional properties:

- `initialVelocity` - the initial velocity of the object attached to the spring. Defaults to `0`.
- `animationSpeed` - controls speed of the animation. Defaults to `1`.

### `closeDrawer(options)`

`closeDrawer` accepts an optional `options` parameter, which is an object with the following optional properties:

- `initialVelocity` - initial velocity of the object attached to the spring. Defaults to `0`.
- `animationSpeed` - controls speed of the animation. Defaults to `1`.

## Example:

See the [reanimated drawer layout example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/apps/common-app/src/release_tests/reanimatedDrawerLayout/index.tsx) from GestureHandler example app.

```js
import React, { useRef } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

import ReanimatedDrawerLayout, {
  DrawerType,
  DrawerPosition,
  DrawerLayoutMethods,
} from 'react-native-gesture-handler/ReanimatedDrawerLayout';

const DrawerPage = () => {
  return (
    <View style={styles.drawerContainer}>
      <Text>Lorem ipsum</Text>
    </View>
  );
};

export default function ReanimatedDrawerExample() {
  const drawerRef = useRef < DrawerLayoutMethods > null;
  const tapGesture = Gesture.Tap()
    .runOnJS(true)
    .onStart(() => drawerRef.current?.openDrawer());

  return (
    <ReanimatedDrawerLayout
      ref={drawerRef}
      renderNavigationView={() => <DrawerPage />}
      drawerPosition={DrawerPosition.LEFT}
      drawerType={DrawerType.FRONT}>
      <View style={styles.innerContainer}>
        <GestureDetector gesture={tapGesture}>
          <View style={styles.box}>
            <Text>Open drawer</Text>
          </View>
        </GestureDetector>
      </View>
    </ReanimatedDrawerLayout>
  );
}

const styles = StyleSheet.create({
  drawerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'pink',
  },
  innerContainer: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 20,
  },
  box: {
    padding: 20,
    backgroundColor: 'pink',
  },
});
```
